// 引入react
import React from "react";
// ReactDOM是用于做浏览器端的项目的
// ReactNative是用于做app端的项目的
import ReactDOM from "react-dom/client";

// 需要引入react-redux，用于将react和redux结合起来，让它拥有响应式
// import { Provider } from "react-redux";
// 引入仓库实例
// import store from "./20-react-redux/store";
// import store from "./21-react-redux-async/store";

import { BrowserRouter } from "react-router-dom";

// import App from "./01-nest/App";
// import App from "./02-style/01-style";
// import App from "./02-style/02-class";
// import App from "./02-style/04-classnames";
// import App from "./02-style/05-cssinjs";
// import App from "./03-props/01-props";
// import App from "./03-props/02-default";
// import App from "./03-props/03-propTypes";
// import App from "./03-props/04-children";
// import App from "./03-props/05-children2";
// import App from "./04-state/01-state";
// import App from "./04-state/02-setState";
// import App from "./05-event/01-this";
// import App from "./05-event/02-args";
// import App from "./06-form/01-control";
// import App from "./06-form/02-notControl";
// import App from "./06-form/03-form";
// import App from "./06-form/04-file";
// import App from "./07-todolist/App";
// import App from "./08-stateup/App";
// import App from "./09-context/App";
// import App from "./10-context2/App";
// import App from "./11-todolist-components/App";
// import App from "./12-portal/App";
// import App from "./13-modal/App";
// import App from "./14-hoc/App";
// import App from "./15-ref/App";
// import App from "./15-ref/App2";
// import App from "./16-old-lifecycle/App";
// import App from "./17-new-lifecycle/App";
// import App from "./18-hooks/01-useState";
// import App from "./18-hooks/02-useEffect";
// import App from "./18-hooks/03-useCallback";
// import App from "./18-hooks/04-useMemo";
// import App from "./18-hooks/05-useRef";
// import App from "./18-hooks/06-useContext";
// import App from "./18-hooks/07-useImperativeHandle";
// import App from "./18-hooks/08-useLayoutEffect";
// import App from "./18-hooks/09-costom";
// import App from "./20-react-redux/App";
// import App from "./21-react-redux-async/App";
// import App from "./22-router/01-basic";
// import App from "./22-router/02-params";
// import App from "./22-router/03-query";
// import App from "./22-router/04-nest";
// import App from "./22-router/05-404";
// import App from "./22-router/06-navlink";
// import App from "./22-router/08-redirect";
// import App from "./22-router/09-navigate";
// import App from "./22-router/10-auth";
// import App from "./22-router/11-routes";
// import App from "./23-lazy/App";
import App from "./24-router-lazy/App";

// 函数组件，用函数的方式来创建组件
// 组件的取名规则
// 组件必须首字母大写
// const App = (props) => {
//   return (
//     <div>
//       hello react! - {props.name} - {props.age}
//     </div>
//   );
// };

// 类组件,使用class的方式来创建组件
// class App2 extends React.Component {
//   // 类里面必须要有一个render函数
//   render() {
//     return <div>12345</div>;
//   }
// }

// 获取项目的根节点
const root = ReactDOM.createRoot(document.getElementById("root"));

// 将括号里面的内容渲染到root节点里面
// root.render(app({ name: "zhangsan", age: 20 }));
// root.render(
//   <div>
//     <App name="zhangsan" age="20" />
//     <App2 />
//   </div>
// );

root.render(
  // <Provider store={store}>
  //   <App />
  // </Provider>
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
